<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>我的积分 - 积分商城</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    /* 积分页面特有样式 */
    .points-header {
      background: linear-gradient(135deg, #ff9966, #ff5e57);
      color: white;
      padding: 20px;
      text-align: center;
      margin-bottom: 10px;
    }
    
    .points-balance {
      font-size: 36px;
      font-weight: bold;
      margin: 10px 0;
    }
    
    .points-actions {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 15px;
    }
    
    .points-action {
      background: rgba(255,255,255,0.2);
      border-radius: 20px;
      padding: 8px 15px;
      font-size: 13px;
    }
    
    .points-tabs {
      display: flex;
      background: white;
      border-bottom: 1px solid #eee;
    }
    
    .points-tab {
      flex: 1;
      text-align: center;
      padding: 15px;
      font-size: 14px;
    }
    
    .points-tab.active {
      color: #ff5e57;
      border-bottom: 2px solid #ff5e57;
    }
    
    .points-history {
      padding: 10px;
    }
    
    .history-item {
      display: flex;
      justify-content: space-between;
      padding: 15px 10px;
      background: white;
      margin-bottom: 10px;
      border-radius: 8px;
    }
    
    .history-info {
      flex: 1;
    }
    
    .history-title {
      font-size: 15px;
      margin-bottom: 5px;
    }
    
    .history-time {
      font-size: 12px;
      color: #999;
    }
    
    .history-points {
      font-weight: bold;
    }
    
    .history-points.income {
      color: #ff5e57;
    }
    
    .history-points.expense {
      color: #09bb07;
    }
  </style>
</head>
<body>
<div class="app-container">
  <!-- 积分头部 -->
  <div class="points-header">
    <div>我的积分</div>
    <div class="points-balance">5,280</div>
    <div>有效期至 2024-12-31</div>
    <div class="points-actions">
      <div class="points-action">积分规则</div>
      <div class="points-action">积分兑换</div>
    </div>
  </div>

  <!-- 积分标签 -->
  <div class="points-tabs">
    <div class="points-tab active">全部</div>
    <div class="points-tab">收入</div>
    <div class="points-tab">支出</div>
  </div>

  <!-- 积分记录 -->
  <div class="points-history" id="pointsHistory">
    <!-- 记录将通过JavaScript动态加载 -->
  </div>
</div>

<!-- 导航栏容器 -->
<div id="navbar-container"></div>

 <!-- 一次性引入合并后的JS -->
<script src="./js/navbar-loader.js"></script>

<script src="js/common.js"></script>
<script>
  // 积分记录数据
  const pointsHistory = [
    { id: 1, type: 'income', title: '信用卡推荐奖励', points: '+500', time: '2023-05-15 14:30', desc: '推荐用户成功办理信用卡' },
    { id: 2, type: 'expense', title: '兑换星巴克咖啡', points: '-200', time: '2023-05-10 09:15', desc: '兑换中杯拿铁一杯' },
    { id: 3, type: 'income', title: '每日签到', points: '+10', time: '2023-05-10 08:00', desc: '连续签到第5天' },
    { id: 4, type: 'income', title: '消费积分', points: '+150', time: '2023-05-08 19:45', desc: '信用卡消费¥1,500' },
    { id: 5, type: 'expense', title: '兑换视频会员', points: '-300', time: '2023-05-05 21:20', desc: '兑换腾讯视频月卡' },
    { id: 6, type: 'income', title: '活动奖励', points: '+100', time: '2023-05-01 10:00', desc: '五一活动奖励' },
    { id: 7, type: 'income', title: '信用卡推荐奖励', points: '+500', time: '2023-04-28 16:40', desc: '推荐用户成功办理信用卡' },
    { id: 8, type: 'expense', title: '兑换优惠券', points: '-50', time: '2023-04-25 11:05', desc: '兑换¥5优惠券' }
  ];

  document.addEventListener('DOMContentLoaded', () => {
    const pointsHistoryContainer = document.getElementById('pointsHistory');
    const tabItems = document.querySelectorAll('.points-tab');
    
    let currentTab = 'all';

    // 渲染积分记录
    function renderHistory() {
      pointsHistoryContainer.innerHTML = '';
      
      const filteredHistory = pointsHistory.filter(item => {
        if (currentTab === 'all') return true;
        if (currentTab === 'income') return item.type === 'income';
        if (currentTab === 'expense') return item.type === 'expense';
        return true;
      });
      
      if (filteredHistory.length === 0) {
        pointsHistoryContainer.innerHTML = '<div style="text-align:center;padding:50px;color:#999">暂无记录</div>';
        return;
      }
      
      filteredHistory.forEach(item => {
        const historyItem = document.createElement('div');
        historyItem.className = 'history-item fade-in';
        historyItem.innerHTML = `
          <div class="history-info">
            <div class="history-title">${item.title}</div>
            <div class="history-time">${item.time}</div>
            <div style="font-size:12px;color:#999;margin-top:5px;">${item.desc}</div>
          </div>
          <div class="history-points ${item.type}">${item.points}</div>
        `;
        
        pointsHistoryContainer.appendChild(historyItem);
      });
    }

    // 初始化
    renderHistory();
    
    // 标签切换
    tabItems.forEach((tab, index) => {
      tab.addEventListener('click', () => {
        tabItems.forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        
        switch(index) {
          case 0: currentTab = 'all'; break;
          case 1: currentTab = 'income'; break;
          case 2: currentTab = 'expense'; break;
        }
        
        renderHistory();
      });
    });
  });
</script>
</body>
</html>